<template>
    <div class="chart-wrapper pie-halo" style="margin-top: 0">
        <div class="slot">
            <div
                class="chart"
                :id="id"
                :style="{ height: height + 'px' }"
            ></div>
        </div>
        <div class="slot">
            <div class="title">
                {{ number }}<small>{{ unit }}</small>
            </div>
            <div class="subtitle">{{ title }}</div>
        </div>
    </div>
</template>

<script>
    import echarts from "echarts";
    import { COLOR_PLATE } from "@/config/global";
    import { calculateColorBrightness } from "@/lib/extension";

    const ratio = JSON.parse(localStorage.ratio);

    export default {
        name: "",
        data() {
            return {
                chartId: null,
                chartObj: null,
                option: null,
                useDualTheme: true,
                theme: "night",
            };
        },
        props: {
            id: {
                type: String,
                required: true,
            },
            height: {
                type: Number,
                default: 300,
            },
            chartData: {
                type: Number,
                required: true,
            },
            chartColors: {
                type: Array,
                default: () => new Array("#B7EC37", "#22A857"),
            },
            title: {
                type: String | Object,
                default: null,
            },
            number: {
                type: Number,
                default: 0,
            },
            unit: {
                type: String,
                default: "",
            },
        },
        watch: {
            id: {
                handler(n, o) {
                    this.updateChart();
                },
                immediate: true,
            },
            chartData: {
                handler(n, o) {
                    this.renderChart();
                },
                immediate: true,
                deep: true,
            },
            height: {
                handler(n, o) {
                    this.updateChart();
                },
                immediate: true,
            },
            chartColors: {
                handler(n, o) {
                    this.updateChart();
                },
                immediate: true,
            },
        },
        mounted() {},
        methods: {
            updateChart() {
                this.determineTheme();
                this.$nextTick(() => {
                    if (this.chartObj) {
                        this.chartObj.setOption(this.option);
                    } else {
                        this.renderChart();
                    }
                });
            },
            renderChart() {
                this.option = {
                    polar: {
                        radius: ["70%", "90%"],
                        center: ["50%", "50%"],
                    },
                    angleAxis: {
                        max: 100,
                        show: false,
                    },
                    radiusAxis: {
                        type: "category",
                        show: false,
                        axisLabel: {
                            show: false,
                        },
                        axisLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                        splitLine: {
                            show: false,
                        },
                    },
                    series: [
                        {
                            name: "",
                            type: "bar",
                            roundCap: true,
                            barWidth: 90,
                            showBackground: false,
                            backgroundStyle: {
                                color: "rgba(66, 66, 66, .3)",
                            },
                            data: [this.chartData],
                            coordinateSystem: "polar",

                            itemStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(
                                        0,
                                        1,
                                        0,
                                        0,
                                        [
                                            {
                                                offset: 0,
                                                color: this.chartColors[0],
                                            },
                                            {
                                                offset: 1,
                                                color: this.chartColors[1],
                                            },
                                        ]
                                    ),
                                },
                            },
                        },
                        {
                            name: null,
                            type: "pie",
                            startAngle: 0,
                            radius: ["85%", "100%"],
                            hoverAnimation: false,
                            center: ["50%", "50%"],
                            labelLine: { show: false },
                            label: { show: false },
                            itemStyle: {
                                color: "rgba(66, 66, 66, 0.2)",
                            },
                            data: [100],
                        },
                    ],
                };
                //debugger
                let chartDom = document.getElementById(this.id);
                if (chartDom) {
                    this.chartObj = echarts.init(chartDom);
                    this.chartObj.setOption(this.option);
                    this.updateChart();
                    window.resize = function () {
                        chartObj.resize();
                    };
                }
            },
            determineTheme() {
                if (this.useDualTheme) {
                    let now = new Date();
                    if (now.getHours() > 19 || now.getHours() < 7) {
                        this.theme = "night";
                    } else {
                        this.theme = "day";
                    }
                }
            },
        },
    };
</script>

<style scoped>
</style>